<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { getUserWallListApi, getWallListApi } from '@/api/index'
import { useWallStore } from '@/store'
import { systemInfo } from '@/utils/systemInfo'
import { goHome } from '@/utils/utils'

definePage({
  style: {
    navigationBarTitleText: '',
  },
})
interface IClassListApiResponse {
  errCode: number
  total: number
  [key: string]: any
}
let wallStore = useWallStore()
let { classList: classify, classListTotal, classificationName, user } = storeToRefs(wallStore)
let classifyParams = reactive({ classid: '', pageSize: 9, pageNum: 1 })
let loading = ref(false)
let noMore = ref(false)
const windowHeight = ref(0)
const showBackTop = ref(false) // 控制返回顶部按钮的显示
let userType = ref('')
async function getClassify() {
  if (loading.value || noMore.value)
    return
  loading.value = true
  try {
    let data
    if (userType.value) {
      classListTotal.value = 1
      data = await getUserWallListApi({ ...classifyParams, type: userType.value })
    }
    else {
      data = await getWallListApi(classifyParams)
    }
    if (data.length < classifyParams.pageSize) {
      noMore.value = true
    }
    classify.value.push(...data)
    classifyParams.pageNum++
  }
  catch (e) {
    console.error(e)
  }
  finally {
    loading.value = false
  }
}
function scrollToTop(flag: boolean) {
  // 滚动到顶部的逻辑
  if (flag) {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 300,
    })
    showBackTop.value = !showBackTop.value
  }
}
function goDetailWall(detail) {
  let url = `/pages/preview/preview?id=${detail._id}`
  if (userType.value === 'download')
    classListTotal.value = user.value.downloadSize
  if (userType.value === 'score')
    classListTotal.value = user.value.scoreSize
  if (userType.value) {
    url = `/pages/preview/preview?id=${detail._id}&type=${userType.value}`
  }

  uni.navigateTo({
    url,
  })
}
//
function onRefresh() {
  // 重置状态
  classify.value.length = 0
  classifyParams.pageNum = 1
  noMore.value = false
  loading.value = false
  getClassify()
}

onLoad((data) => {
  if (!data.classid && !data.type) {
    goHome()
    return
  }
  // 获取屏幕高度
  uni.getSystemInfo({
    success: (res) => {
      windowHeight.value = res.windowHeight
    },
  })
  if (data.classname)
    classificationName.value = data.classname
  uni.setNavigationBarTitle({ title: classificationName.value })
  userType.value = data.type
  classifyParams.classid = data.classid
  classify.value = []

  getClassify()
})
onShow(() => {

})
onReachBottom(() => {
  getClassify()
})
// 监听页面滚动，动态控制下拉刷新的启用/禁用
onPageScroll((e) => {
  // 滚动超过一个屏幕高度时显示返回顶部按钮
  if (e.scrollTop > windowHeight.value) {
    showBackTop.value = true
  }
  else {
    showBackTop.value = false
  }
})
// #ifndef H5
onShareAppMessage((e) => {
  // 分享给好友

  return {
    title: `花朵壁纸-${classificationName.value}`,
    path: `/pages/classList/classList?classid=${classifyParams.classid}&classname=${classificationName.value}`,
  }
})
// 分享朋友圈
onShareTimeline(() => {
  return {
    title: `花朵壁纸-${classificationName.value}`,
    imageUrl: '/static/images/flower.png', // 1比1
    query: `classid=${classifyParams.classid}&classname=${classificationName.value}`,
  }
})
// #endif
</script>

<template>
  <view class="classification" :style="{ paddingBottom: `${systemInfo?.statusBarHeight}px` }">
    <view class="grid grid-cols-3 content-center gap-10px grid-justify-center rounded-8px">
      <view
        v-for="(item, index) in classify" :key="`${item._id}-${index}`" class="h-400px w-100%"
        @click="goDetailWall(item)"
      >
        <uv-image :src="item.smallPicurl" width="100%" height="100%" :observe-lazy-load="true" key-name="smallPicurl">
          <template #loading>
            <uv-loading-icon color="green" />
          </template>
        </uv-image>
      </view>
    </view>
    <!-- 底部提示信息 -->
    <view class="py-20px text-center">
      <text v-if="loading" class="text-gray-500">加载中...</text>
      <text v-else-if="noMore" class="text-gray-500">没有更多数据了</text>
      <!-- <text v-else class="text-gray-500">上拉加载更多</text> -->
    </view>
    <!-- 刷新 返回顶部 -->
    <view v-if="showBackTop">
      <view
        class="flash fixed right-20px size-36px flex items-center justify-center rounded-full bg-green-500 shadow-lg"
        @click="onRefresh()"
      >
        <uv-icon name="reload" color="#ffffff" size="18" />
      </view>
      <view
        class="fixed bottom-15vh right-20px size-36px flex items-center justify-center rounded-full bg-green-500 shadow-lg"
        :class="!showBackTop && 'disabled-grew'" @click="scrollToTop(showBackTop)"
      >
        <uv-icon name="arrow-up" color="#ffffff" size="18" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.disabled-grew {
  background: #c7bdbd;
}

.flash {
  bottom: calc(46px + 15vh);
}
</style>
